<template>
  <div id="app">
    <Word v-if="type === 'word'" />
    <Letter v-else />
  </div>
</template>

<script>
import Letter from './components/Letter.vue'
import Word from './components/Word.vue'

export default {
  name: 'App',
  components: {
    Letter,
    Word
  },
  data(){
    return {
      type: 'letter'
    }
  },
  mounted(){
    let query = location.search;
    if(query.includes('word')){
      this.type = 'word';
    }
    else{
      this.type = 'letter';
    }
      
    
  }
}
</script>

<style>

@font-face {
  font-family: "PlaywriteGBS"; 
  src: url('./assets/PlaywriteGBS-Regular.ttf') format('truetype');
}

@font-face {
  font-family: "iconfont"; /* Project id 4735820 */
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPcAAsAAAAACAwAAAOPAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDHAqDQIMTATYCJAMQCwoABCAFhGcHPhsRB1FULhpkPwfcNhpd1jg0WXw8niUvOYbCcnf3WxIneTx8jbX3d/cUtebaaHRIJJJJJjEdEoR8pZE6TbSEu29tj1jiddKEhEWXpH1l9sTnBsu0RGk0QqRRf0n/5/XynV3YUychuVJTepV/thor6EkcJm8ee2Vr/j/HjFfPx9GfNgCIKo5qHNi8dTiKiju7tgO/d36CfsPYBS3xOQJN6wZy+4vdMVO9ExxmagrM6iCJjzvHEpkK1yoN8aEuVLuuLOIFKqQn6jmeg5+Pf5tRIalk5j6HF3OdeX+dtzLSIpDfeFUCHJ1QQcbyxvRx1Ww9kY88y/KaVf0LdmXU1SUmbXvYamsR/1DSuvUvj5AlosqM7QTbyJv5OnKYBF8P3CpZC/olfBV5HUY9AgPbYCoNpulNA6pQIBAqhFLDpCdIbn54wO6dTY+PGc0ZEemLmuDXoIcHddPWHDm/3bw5i2Y2quk4LZ1L5WWA5NJ4BZO2uw/o3mHCRh4zrT//RCEfg5RRk3kO+9x5ck5PWd08CXQ0wRU2KRP7SFVSPy+jr0keh/eNTCAFFtczODmuUmO949NDSlzdP8Spd04ZajwMubVZPisu5kmnhHeql1cqgVlYVZASqVI0iIUyvXMNPuZ85j58yDcEG5peWZzdoUl7EzSVbqU1npxNnQ35lAeITIlSM+K/bFF+Zvbco4c7+tjkx5dvXxiHxxiEzAafSZxceZ9b4Le0KjAV2glNBUg8fC/PV+a7M4fFaLlRvzE2FscGSKpeQ8iAYZW6Jh24gU4qx1vJBg2YZ9H+0gqA9rNQaPoAALSztPZL/wZ8twl5mijg17POK+D9wFIg7M79JTyV+wO7Oy5Au12C2yjlmQUOF2OLDbmXwIJsrvDHAvT7TSEf6BxLqBtIIKmZgKxuElEwi1DRYROq6vagacl8fYcBsbwoDcx6Agi9XpB0e4Ws1wdRMF+oGPYHVb3+oekoBLt1mA01JRSMGuQDHBWFxlZw0OkerYsvqMx5RkodaIeWk0vev8QQaYw56dVqMxswFAWwoOeh70cQU+Si4rrNHHcazrlVL1JXUZCZIkhgSAPSA3AokZDxKnP29+0hy4VPoI6Is5mkmIM6By11zQ6IpTTsVHYj+6SuLG2MGcAg4AuABTcjX/VEQFw9zIUUVmcPcMU6GlYl01VaX14evN4aaDIfK5EiR4mKcu/graDxxaNUhEF0xUwGAA==') format('woff2');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-view:before {
  content: "\e656";
}

.icon-play:before {
  content: "\e6a2";
}

.icon-remove:before {
  content: "\e67c";
}


html{
  height: 100%;
}
body{
  height: 100%;
  margin:0;
  padding:0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;

}
</style>
